import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
// Route 组件作用:
// 作用1: 可以在该组件上定义路由规则 path +component
// 作用2: 相当于路由出口 router-view 的作用,该组件放在哪. 匹配到的路由就显示在哪一个位置

// Link 组件:
// 作用: 相当于vue中的Router-Link
// 引入路由规则组件

// 编程式导航
// 实现的思路: 在事件中调用this.props.history.push(path)/replace(path)
// 注意: 前提: 需要当前页面组件有路由三剑客,(只有通过路由跳转后的组件props上才有路由三剑客)
// 解决方式: 使用withRouter 这个hoc高阶组件函数包裹该组件,则该组件就有路由三剑客
import Index from '../router/Index';
class Father extends Component {
    state = {
        id: 100,
        id1: 99
    }
    render() {
        return (
            // 声明式导航
            <>
                <p>
                    {/* 声明式导航传参:查询字符串形式 */}
                    {/* <Link to={'/home?id=' + this.state.id}>首页</Link> */}
                    {/* 声明式导航传参:动态路由方式 */}
                    {/* <Link to={`/category/${this.state.id}/${this.state.id1}`}>分类</Link> */}
                    {/* 声明式导航传参:对象形式包含查询字符串和隐式传参 */}
                    {/* <Link to={{
                        pathname: '/car',
                        //search: `id=${this.state.id}&id1=${this.state.id1}`  查询字符串方式
                        state: { // 隐式传参 用来进行页面埋点
                            id: this.state.id,
                            id1: this.state.id1
                        }
                    }}>购物车</Link>
                    <Link to='/mine'>我的</Link> */}
                </p>
                {/* 编程式导航 */}
                <p>
                    <span onClick={() => {
                        //console.log('this-father', this)
                        // 传参方式同上
                        this.props.history.push('/home')
                    }}>首页</span>
                    <span>分类</span>
                    <span>购物车</span>
                    <span>我的</span>
                </p>
                {/* 路由规则 */}
                <Index></Index>
            </>
        )
    }
}

export default withRouter(Father)